<template>
  <div class="questionItem" :class="{ p15: isSearch }">
    <div class="content">
      <div
        class="title"
        :class="{
          f100: question.cover.type === 0 || question.cover.type === 3,
          pr20: question.cover.type === 1
        }"
      >
        <h3 class="van-multi-ellipsis--l3" v-html="question.title"></h3>
      </div>
      <van-image
        class="img"
        v-show="question.cover.type !== 0"
        v-for="(item, index) in question.cover.images"
        :key="index"
        :src="item"
        width="100"
        height="100"
        fit="cover"
        lazy-load
      >
        <!-- 加载中loading -->
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
        <!-- 加载失败tip -->
        <template v-slot:error>
          <span class="error-text">
            <i class="iconfont icon-EmojiSad"></i>图片不见啦</span
          >
        </template>
      </van-image>
    </div>
    <div class="other">
      <div class="left">
        <div v-if="question.is_top === 0" class="o1">置顶</div>
        <div class="o2">{{ question.aut_name }}</div>
        <div class="o3">{{ question.pubdate | format }}</div>
      </div>
      <div class="right">
        <div class="o1">
          <i class="iconfont icon-pinglun"></i>{{ question.comm_count }}
        </div>
        <div class="o2">
          <i class="iconfont icon-zan2"></i>{{ question.like_count }}
        </div>
        <div class="o3">
          <i class="iconfont icon-shoucang3"></i>{{ question.collect_count }}
        </div>
      </div>
    </div>
    <!-- 分割线 -->
    <van-divider />
  </div>
</template>

<script>
export default {
  name: 'QuestionItem',
  props: ['question', 'inputValue', 'isSearch'],
  data () {
    return {}
  },
  created () {
    if (this.isSearch) {
      // 高亮title
      this.question.title = this.question.title.replace(
        new RegExp(this.inputValue, 'gim'),
        `<span class="highLight">${this.inputValue}</span>`
      )
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.questionItem {
  &.p15 {
    padding: 0 @p15;
  }
  // 标题内容和图片主体部分
  .content {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    min-height: 50px;
    .title {
      flex: 1;
      h3 {
        font-family: MicrosoftYaHei;
        font-size: 16px;
        font-weight: 400;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #3a3a3a;
        line-height: 26px;
      }
      // 高亮
      ::v-deep span.highLight {
        color: #f8316d;
      }
      // 只有一张图片时标题的右内边距
      &.pr20 {
        padding-right: 20px;
      }
      // 标题占一行时
      &.f100 {
        flex-basis: 100%;
        margin-bottom: @p15;
      }
    }
    // 图片
    .img {
      //   width: 100px;
      //   height: 100px;
      //   object-fit: cover;
      overflow: hidden;
      border-radius: 8px;
      border: 1px solid #eee;
      & + .img {
        margin-left: 20px;
      }
      // 加载失败的显示字体大小
      .error-text {
        font-size: 12px;
      }
    }
  }
  // 底部一栏
  .other {
    display: flex;
    align-items: center;
    padding-top: @p15;
    // 左边
    .left {
      display: flex;
      font-size: 12px;
      color: #b4b4b4;
      .o1 {
        color: #e22829;
      }
      div {
        display: flex;
        align-items: center;
        i {
          padding-right: 5px;
        }
      }
      div + div {
        margin-left: 10px;
      }
    }
    // 右边选项按钮
    .right {
      display: flex;
      margin-left: auto;
      font-size: 12px;
      color: #b4b4b4;
      div {
        display: flex;
        align-items: center;
        i {
          padding-right: 5px;
        }
      }
      div + div {
        margin-left: 10px;
      }
    }
  }
}
</style>
